<template>
    <div class="main" style="margin-bottom: 20px;margin-top:  20px;">
        <el-form :model= "queryParams" ref="elForm" size="medium" :inline="true" label-width="100px">
            <el-row>
                <el-col :span="2" :offset="1">
                    <el-button type="success" @click="openAdd">新增</el-button>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="服务器名称" prop="name">
                        <el-input v-model="queryParams.name" placeholder="请输入服务器名称" show-word-limit clearable
                            :style="{ width: '180px' }"></el-input>
                    </el-form-item>
                    <el-form-item size="large">
                        <el-button type="primary" @click="submitForm">查询</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2" :offset="10">
                    <el-button icon="el-icon-question" type="primary" @click="openHelp">如何使用</el-button>
                </el-col>
            </el-row>
        </el-form>
        
        <el-tabs v-model="listTransmitType" label="转发方式选择" tab-position="left" @tab-click="handleListClick" type="card">
            <el-tab-pane label="HTTP" name="HTTP">
            <el-row type="flex" justify="center">
            <el-table
                v-loading="loading"
                :data="dataList"
                stripe border
                style="width: 100%">

                <el-table-column prop="name" label="服务器名称" width="220" align="center">
                </el-table-column>

                <el-table-column prop="isEnabled" label="是否启用" width="120" align="center">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.isEnabled == 'Y'">{{computedIsEnabled(scope.row.isEnabled)}}</el-tag>
                        <el-tag type="info" v-if="scope.row.isEnabled == 'N'">{{computedIsEnabled(scope.row.isEnabled)}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="domain" label="域名或IP" width="280" align="center">
                </el-table-column>

                <el-table-column prop="port" label="端口号" width="120" align="center">
                </el-table-column>

                <el-table-column prop="apiPath" label="接口路径" width="280" align="center">
                </el-table-column>

                <el-table-column prop="urlPath" label="请求路径" min-width align="center">
                </el-table-column>

                <el-table-column label="操作" min-width align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="openEdit(scope.row.id)">编辑</el-button>
                        <el-button type="warning" v-if="scope.row.isEnabled=='N'" @click="changeEnabledStatus('Y', scope.row.id)">启用</el-button>
                        <el-button type="primary" v-if="scope.row.isEnabled=='Y'" @click="changeEnabledStatus('N', scope.row.id)">取消启用</el-button>
                        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table></el-row></el-tab-pane>

            <el-tab-pane label="WEBSOCKET" name="WEBSOCKET">
            <el-row type="flex" justify="center">
                <el-table
                    v-loading="loading"
                    :data="dataList"
                    stripe border
                    style="width: 100%">
                    
                    <el-table-column prop="name" label="服务器名称" width="220" align="center"></el-table-column>

                    <el-table-column prop="isEnabled" label="是否启用" width="120" align="center">
                        <template slot-scope="scope">
                            <el-tag type="primary" v-if="scope.row.isEnabled == 'Y'">{{computedIsEnabled(scope.row.isEnabled)}}</el-tag>
                            <el-tag type="info" v-if="scope.row.isEnabled == 'N'">{{computedIsEnabled(scope.row.isEnabled)}}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="websocketSid" label="websocket监听地址" min-width align="center"></el-table-column>

                    <el-table-column prop="urlPath" label="websocket监听地址" min-width align="center"></el-table-column>

                    <el-table-column label="操作" min-width align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="openEdit(scope.row.id)">编辑</el-button>
                            <el-button type="warning" v-if="scope.row.isEnabled=='N'" @click="changeEnabledStatus('Y', scope.row.id)">启用</el-button>
                            <el-button type="primary" v-if="scope.row.isEnabled=='Y'" @click="changeEnabledStatus('N', scope.row.id)">取消启用</el-button>
                            <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row></el-tab-pane>
        </el-tabs>
        

        <!-- 新增表单 -->
        <el-dialog title="新增" :visible.sync="dialogAddForm" width="30%">
           <el-tabs v-model="transmitType" @tab-click="handleClick">
                <el-tab-pane label="HTTP方式" name="HTTP">
                    <el-form :model="addParams" ref="addForm" size="medium" :inline="true" label-width="100px">
                        <el-row>
                            <el-form-item label="服务器名称" label-width='120px'>
                                <el-input v-model="addParams.name"  :style="{ width: '250px' }"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="域名或IP" label-width='120px'>
                                <el-input v-model="addParams.domain"  :style="{ width: '250px' }" placeholder="http://xxxxxx"></el-input>
                            </el-form-item>
                        </el-row>
                         <el-row>
                            <el-form-item label="端口号" label-width='120px'>
                                <el-input v-model="addParams.port"  :style="{ width: '250px' }" placeholder="没有端口号则不输入"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="接口路径" label-width='120px'>
                                <el-input v-model="addParams.apiPath"  :style="{ width: '250px' }" placeholder="如: /api/info/list"></el-input>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="WEBSOCKET方式" name="WEBSOCKET">
                    <el-form :model="addParams" ref="addForm" size="medium" :inline="true" label-width="100px">
                        <el-row>
                            <el-form-item label="服务器名称" label-width='120px'>
                                <el-input v-model="addParams.name"  :style="{ width: '250px' }"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="sid" label-width='120px'>
                                <el-input v-model="addParams.websocketSid"  :style="{ width: '250px' }"></el-input>
                                <el-tooltip effect="dark" content="生成的websocket服务端路径为：ws://[本系统所在服务器公网ip]:[本系统所使用的端口号]/websocket/{sid}" style="margin-left: 10px;"
                                placement="bottom"><i class='el-icon-question' /></el-tooltip>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addFormData()">新增</el-button>
            </span>
        </el-dialog>
        <!-- 编辑表单 -->
        <el-dialog title="编辑" :visible.sync="dialogEditForm" width="30%">
            <el-form :model="editParams" ref="editForm" size="medium" :inline="true" label-width="100px">
                <el-row>
                    <el-form-item label="服务器名称" label-width='120px'>
                        <el-input v-model="editParams.name"  :style="{ width: '250px' }"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="转发类型" label-width='120px'>
                        <el-select v-model="editParams.transmitType" @change="changeValue" :style="{ width: '250px' }">
                            <el-option label="HTTP" value="HTTP"></el-option>
                            <el-option label="WEBSOCKET" value="WEBSOCKET"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="域名或IP" label-width='120px' v-if="editParams.transmitType == 'HTTP'">
                        <el-input v-model="editParams.domain"  :style="{ width: '250px' }" placeholder="http://xxxxxx"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="端口号" label-width='120px' v-if="editParams.transmitType == 'HTTP'">
                        <el-input v-model="editParams.port"  :style="{ width: '250px' }" placeholder="没有端口号则不输入"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="接口路径" label-width='120px' v-if="editParams.transmitType == 'HTTP'">
                        <el-input v-model="editParams.apiPath"  :style="{ width: '250px' }" placeholder="如: /api/info/list"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="sid" label-width='120px' v-if="editParams.transmitType == 'WEBSOCKET'">
                        <el-input v-model="editParams.websocketSid"  :style="{ width: '250px' }" placeholder="如: test"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="请求路径" label-width='120px'>
                        <el-input v-model="editParams.urlPath"  :style="{ width: '380px' }" :disabled="true"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editFormData()">编辑</el-button>
            </span>
        </el-dialog>

        <el-drawer :visible.sync="dialogHelpVisible"  size="50%" direction="rtl">
            <el-tabs v-model="helpType" @tab-click="handleHelpClick" type="card">
                <el-tab-pane label="HTTP请求方式" name="HTTP">
                    <span style="font-size: 20px"><b>HTTP请求方式使用说明</b></span><pre>    </pre>
                    <pre><span style="font-size: 16px">    当某个http请求方式配置启用后，本平台会通过http请求将设备实时上传的数据转发到该配置的请求路径</span></pre>
                    <pre><span style="font-size: 20px"><b>请将对应接口的访问权限解除，否则您将无法正常获取到数据</b></span></pre>
                </el-tab-pane>
                <el-tab-pane label="Websocket服务端发送方式" name="WEBSOCKET">
                    <span style="font-size: 20px"><b>Websocket服务端发送方式使用说明</b></span><pre>    </pre>
                    <pre><span style="font-size: 16px">    websocket方式配置启用后。本系统会将设备上传数据发送到ws://[本系统所在的公网IP]:[本系统后端端口号]/websocket/{sid}</span></pre>
                    <pre><span style="font-size: 16px">    假设，公网ip为：188.101.20.222，端口号为：8888，sid为：test</span></pre>
                    <pre><span style="font-size: 16px">    则，websocket客户端的连接地址应为：ws://188.101.20.222:8888/websocket/test </span></pre>
                </el-tab-pane>
            </el-tabs>
            
            <el-divider></el-divider>
            <el-row>
                <span style="font-size: 20px"><b>发送的数据如下（http请求方式格式为json，websocket方式为json字符串，需要转换），返回的对象数据会根据dataType的值不同而不同</b></span>
                <el-table :data="deathDataList" stripe border style="width: 100%; margin-bottom: 20px" row-key="id"
                     :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

                    <el-table-column prop="name" label="参数名" width="180px" align="center">
                    </el-table-column>

                    <el-table-column prop="type" label="参数类型" width="150px" align="center">
                    </el-table-column>

                    <el-table-column prop="meaning" label="含义" width="230px" align="center">
                    </el-table-column>

                    <el-table-column prop="explain" label="说明" min-width align="center">
                    </el-table-column>

                </el-table>
                <span style="font-size: 20px; color: #7DDA58"><b>发送的数据示例：</b></span>
                <pre>        示例1：
                    {
                        "dataType": "COMMON",
                        "deviceMac": "DCDA0CCDF78E",
                        "CommonDataVO": {
                            "energy": 0.279,
                            "relayStatus": 1,
                            "onlineStatus": 1,
                            "workStatus": 1,
                            "refreshTime": 1721293681444,
                             "voltage": 234.69,
                            "powerFactor": 0.4,
                            "frequency": 49.95,
                            "activePower": 12.616,
                            "cucurrentElectric": 0.132
                        }
                    }
                </pre>
                <pre>        示例2：
                    {
                        "dataType": "OVERLOAD",
                        "deviceMac": "DCDA0CCDF78E",
                        "overloadExDataVO": {
                            "exEnergy": 0.279,
                            "exVoltage": 234.69,
                            "exActivePower": 12.616,
                            "exCurrentElectric": 0.132
                        }
                    }
                </pre>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <span style="font-size: 20px"><b>您需要返回一个响应给本平台，结构如下：</b></span>
                <pre>
                    {
                        "msg": "",
                        "code": 200                         // 200即为成功
                    }
                </pre>
            </el-row>
        </el-drawer>

    </div>
    
</template>

<script>
    import { getDataTransmitList, addDataTransmitConfig, editDataTransmitConfig, 
             getDetail, delDataTransmitConfig, changeEnabledStatus} from "@/api/alm/dev-base-info/data-transmit-config/data-transmit-config";

    export default {
        data() {
            return {
                listTransmitType: 'HTTP',
                transmitType: 'HTTP',
                helpType: 'HTTP',
                addParams: {},
                editParams: {},
                queryParams: {
                    name: null
                },
                loading: false,
                dataList: [],
                isEnabledMap: {},

                dialogAddForm: false,
                dialogEditForm: false,
                dialogHelpVisible: false,

                deathDataList: [
                    {
                        id: 1,
                        // 参数名
                        name: 'dataType',
                        // 参数类型
                        type: 'String',
                        // 含义
                        meaning: '所上传数据的类型',
                        // 说明
                        explain: 'COMMON-正常  OVERLOAD-过载异常  TRANSIENT-瞬态异常 '
                    },
                    {
                        id: 2,
                        name: 'deviceMac',
                        type: 'String',
                        meaning: '设备MAC地址',
                        explain: '设备的物理地址',
                    },
                    {
                        id: 3,
                        name: 'commonDataVO',
                        type: 'Object',
                        meaning: '设备上传的正常数据对象',
                        explain: '如果dataType为COMMON，则返回该对象',
                        children:[
                            {
                                id: 30,
                                name: 'energy',
                                type: 'BigDecimal',
                                meaning: '当前用电量',
                                explain: '/',
                            },
                            {
                                id: 31,
                                name: 'relayStatus',
                                type: 'Integer',
                                meaning: '继电器状态',
                                explain: '0-离线 1-在线',
                            },
                            {
                                id: 32,
                                name: 'onlineStatus',
                                type: 'Integer',
                                meaning: '在线状态',
                                explain: '0-离线 1-在线',
                            },
                            {
                                id: 33,
                                name: 'workStatus',
                                type: 'Integer',
                                meaning: '工作状态',
                                explain: '0-离线 1-在线',
                            },
                            {
                                id: 34,
                                name: 'refreshTime',
                                type: 'Long',
                                meaning: '设备数据上传时间戳',
                                explain: '该时间戳为毫秒级时间戳',
                            },
                            {
                                id: 35,
                                name: 'voltage',
                                type: 'BigDecimal',
                                meaning: '电压',
                                explain: '单位为 V',
                            },
                            {
                                id: 36,
                                name: 'powerFactor',
                                type: 'BigDecimal',
                                meaning: '功率因素',
                                explain: '/',
                            },
                            {
                                id: 37,
                                name: 'frequency',
                                type: 'BigDecimal',
                                meaning: '频率',
                                explain: '/',
                            },
                            {
                                id: 38,
                                name: 'activePower',
                                type: 'BigDecimal',
                                meaning: '平均功率',
                                explain: '单位为 W',
                            },
                            {
                                id: 39,
                                name: 'currentElectric',
                                type: 'BigDecimal',
                                meaning: '当前电流',
                                explain: '单位为 A',
                            },
                        ]
                    },
                    {
                        id: 4,
                        name: 'overloadExDataVO',
                        type: 'Object',
                        meaning: '设备上传的过载异常数据对象',
                        explain: '如果dataType为OVERLOAD，则返回该对象',
                        children:[
                            {
                                id: 40,
                                name: 'exVoltage',
                                type: 'Double',
                                meaning: '异常电压',
                                explain: '单位为 V',
                            },
                            {
                                id: 41,
                                name: 'exEnergy',
                                type: 'Double',
                                meaning: '异常用电量',
                                explain: '/',
                            },
                            {
                                id: 42,
                                name: 'exActivePower',
                                type: 'Double',
                                meaning: '异常功率',
                                explain: '单位为 W',
                            },
                            {
                                id: 43,
                                name: 'exCurrentElectric',
                                type: 'Double',
                                meaning: '异常电流',
                                explain: '单位为 A',
                            },
                        ]
                    },
                    {
                        id: 5,
                        name: 'transientExDataVO',
                        type: 'Object',
                        meaning: '设备上传的瞬态异常数据对象',
                        explain: '如果dataType为TRANSIENT，则返回该对象',
                        children:[
                            {
                                id: 51,
                                name: 'stExEnergy',
                                type: 'Double',
                                meaning: '异常用电量',
                                explain: '/',
                            },
                            {
                                id: 52,
                                name: 'stExVoltage',
                                type: 'Double',
                                meaning: '异常电压',
                                explain: '单位为 V',
                            },
                        ]
                    },
                ],
            }
        },

        computed: {
            computedIsEnabled() {
                return function(value) {
                    return this.isEnabledMap.get(value)
                }
            }
        },

        created() {
            this.isEnabledMap = new Map();
            this.isEnabledMap.set("N", "否");
            this.isEnabledMap.set("Y", "是");

            this.getList(this.queryParams);
        },

        methods: {
            changeValue(){
                this.transmitType = this.editParams.transmitType;
                console.log(this.transmitType)
            },
            handleHelpClick(tab, event) {
                console.log(tab, event);
            },
            handleListClick(tab, event) {
                this.getList({});
            },
            handleClick(tab, event) {
            },
            openHelp() {
                this.dialogHelpVisible = true;
            },
            // 编辑数据
            editFormData() {
                console.log(this.editParams);
                editDataTransmitConfig(this.editParams).then(res => {
                    if(res.code == 200) {
                        this.$message.success('修改成功');
                        this.getList({});
                        this.dialogEditForm = false;
                    }else{
                        this.$message.error('修改失败');
                    }
                    
                })
                
            },
            // 打开编辑表单
            openEdit(id) {
                getDetail(id).then(res => {
                    this.editParams = res.data;
                    this.dialogEditForm = true;
                })
            },
            // 新增数据
            addFormData() {
                this.addParams.transmitType = this.transmitType;
                addDataTransmitConfig(this.addParams).then(res => {
                    if(res.code == 200) {
                        this.$message.success("新增成功");
                    }
                    this.getList({});
                    this.dialogAddForm = false;
                })
            },
            // 打开新增表单
            openAdd() {
                this.addParams = {};
                this.dialogAddForm = true;
            },
            // 查询
            submitForm() {
                this.getList(this.queryParams);
            },
            // 重置
            resetForm() {
                this.$refs["elForm"].resetFields();
                this.queryParams = {};
                this.getList(this.queryParams);
            },
            // 获取列表数据
            getList(obj) {
                this.loading = true;
                this.dataList = [];
                obj.transmitType = this.listTransmitType;
                getDataTransmitList(obj).then(res => {
                    this.dataList = res.data;
                    this.loading = false;
                })
            },
            // 删除
            del(id) {
                delDataTransmitConfig(id).then(res => {
                    this.loading = true;
                    let listParams = {};
                    listParams.transmitType = this.listTransmitType;
                    getDataTransmitList(listParams).then(e => {
                        this.dataList = e.data;
                        this.loading = false;
                    })
                })
            },
            // 修改启用状态
            changeEnabledStatus(isEnabled, id) {
                let params = {
                    id: id,
                    isEnabled: isEnabled
                };

                changeEnabledStatus(params).then((res) => {
                    if(res.code == 200) {
                        this.$message.success('修改成功！');
                        let listParams = {};
                        listParams.transmitType = this.listTransmitType;
                        getDataTransmitList(listParams).then(e => {
                            this.dataList = e.data;
                        });
                    }
                    
                })
            },
            // 强制刷新
            change(){
                //强制刷新
	            this.$forceUpdate();  
            }
        }
    }
</script>